import React, { memo } from 'react'

const App = () => {
	const [count, setCount] = useState(0)

	return (
		<div>
			<div>APP</div>
			<button
				onClick={() => {
					setCount(count + 1)
				}}
			>
				+1
			</button>
			<Foo />
		</div>
	)
}

// count发生改变  Foo不需要重新渲染，减少不必要的渲染
const Foo = memo(() => {
	console.log('使用memo后，count发生变化，这个组件不会重新渲染')
	return (
		<div>
			<div>Foo</div>
		</div>
	)
})

export default App
